<template>
  <div id="category">
    <nav-bar class="navBar">
      <span slot="left" class="iconfont icon-huitui leftInfo" @click="$router.back()"></span>
      <div slot="center" class="centerInfo">
        <input type="text" v-model="searchVal" placeholder="家电返场 11.11">
        <span class="search iconfont icon-sousuo"></span>
        <span class="cancel iconfont icon-quxiao" v-if="search" @click="clearSearchVal"></span>
      </div>
      <span slot="right" class="iconfont icon-gengduo right-icon"></span>
    </nav-bar>

    <scroll class="nav-content" ref="navContent">
      <ul class="left">
        <li v-for="(item,index) in categoryList" :class="{'active': currentIndex===index}" @click="cateMenu(index)" :key="index">
          <span>{{item.name}}</span>
        </li>
      </ul>
    </scroll>

    <scroll class="content" ref="content">
      <div>
        <div class="right" v-for="(item,index) in categoryInfo" :key="index">
          <img class="header-img" :src="item.mainImgUrl" alt="" v-if="item.mainImgUrl">
          <div class="detail" v-for="(detail,index) in item.list" :key="index">
            <h3>{{detail.title}}</h3>
            <ul>
              <li v-for="(product,index) in detail.productList" :key="index">
                <img :src="product.imgUrl" alt="" srcset="">
                <span>{{product.title}}</span>
              </li>
            </ul>

          </div>

        </div>
      </div>
    </scroll>

  </div>

</template>
<script>
import navBar from 'components/common/navbar/navBar'

import Scroll from 'components/common/scroll/Scroll'


export default {
  name: 'Category',
  data() {
    return {
      searchVal: '',
      categoryList: [],
      currentIndex: 0,

    }
  },
  components: {
    navBar,
    Scroll
  },
  computed: {
    search() {
      return this.searchVal.trim() ? true : false
    },
    // 过滤出当前与index相同的数据
    categoryInfo() {
      return this.categoryList.filter((v, i) => this.currentIndex == i)
    }
  },
  created() {
    this.getCategoryInfo()
  },



  methods: {

    // 获取分类数据
    async getCategoryInfo() {
      const res = await this.$require({
        url: '/category/data',
        method: 'get'
      })
      if (res.status == 0) {
        this.categoryList = res.data
        this.$nextTick(() => {
          this.$refs.content.refresh()
          this.$refs.navContent.refresh()

        })
      }
      // this.$nextTick(() => {
      //   this.$refs.navContent.init()
      // })
    },
    cateMenu(index) {
      this.currentIndex = index
    },

    clearSearchVal() {
      this.searchVal = ""
    }
  }
}
</script>
<style scoped lang="scss">
#category {
  height: 100vh;
  position: relative;
}
.navBar {
  box-sizing: border-box;
  overflow: hidden;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  background-color: #f6f6f6;

  span {
    font-size: 14px;
  }
  .leftInfo {
    font-size: 20px;
    font-weight: 500;
    display: block;
  }
  .centerInfo {
    position: relative;
    input {
      width: 100%;
      height: 30px;
      border-radius: 20px;
      outline: none;
      border: 1px solid #eee;
      padding: 0px 0 0px 35px;
      box-sizing: border-box;
      font-size: 14px;
      line-height: 50px;
    }
    input::placeholder {
      color: #999;
      font-size: 13px;
    }
    .center-item {
      position: absolute;
      left: 0;
      top: 15px;
      color: rgb(246, 53, 21);
      font-size: 18px;
      font-weight: 600;
      display: inline-block;
      padding: 10px 6px 10px 10px;
      line-height: 0;
      border-right: 1px solid #999;
    }
    .search {
      position: absolute;
      left: 10px;
      color: #999;
      font-size: 16px;
      font-weight: bold;
    }
    .cancel {
      position: absolute;
      top: 0;
      right: 10px;
      color: #333;
      font-size: 16px;
      font-weight: 500;
    }
  }
  .right-icon {
    font-size: 20px;
    font-weight: 500;
    display: block;
  }
}
.active {
  background-color: #fff;
  color: #f63515;
}
.nav-content {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 0;
  width: 30%;
  overflow: hidden;
  height: calc(100vh - 100px);
}
.content {
  position: absolute;
  top: 50px;
  bottom: 50px;
  right: 0;
  width: 70%;
}
.left {
  background-color: #f8f8f8;
  overflow: hidden;
  li {
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 14px;
  }
}
.right {
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;

  .header-img {
    width: 100%;
    height: 91px;
    object-fit: cover;
  }
  h3 {
    padding: 22px 0;
    font-size: 18px;
    font-weight: 400;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 80px;
      height: 104px;
      margin-bottom: 10px;
      text-align: center;
      img {
        width: 80px;
        height: 80px;
        object-fit: cover;
      }
      span {
        font-size: 15px;
        column-rule: #333;
      }
    }
  }
}
</style>
